<template>
  <div class="project-material-list">
    <div class="list-header">
      <el-button type="primary" @click="handleAdd"> <Icon icon="ep:plus" />添加资料 </el-button>
      <div class="search-box">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索资料名称"
          clearable
          @input="handleSearch"
        >
          <template #prefix>
            <Icon icon="ep:search" />
          </template>
        </el-input>
      </div>
    </div>

    <el-table :data="filteredMaterials" stripe v-loading="loading">
      <el-table-column width="50">
        <template #default="{ row }">
          <Icon :icon="getFileIcon(row.type)" :size="24" />
        </template>
      </el-table-column>
      <el-table-column prop="name" label="资料名称1" min-width="200" show-overflow-tooltip />
      <el-table-column prop="type" label="文件类型" width="100">
        <template #default="{ row }">
          <el-tag size="small">{{ getFileTypeName(row.type) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="size" label="文件大小" width="100" />
      <el-table-column prop="version" label="版本" width="100" />
      <el-table-column prop="createTime" label="创建时间" width="150">
        <template #default="{ row }">
          {{ formatDate(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" min-width="150" show-overflow-tooltip />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button size="small" type="primary" @click="handleDownload(row)">
            <Icon icon="ep:download" />下载
          </el-button>
          <el-button size="small" type="warning" @click="handleEdit(row)">
            <Icon icon="ep:edit" />编辑
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">
            <Icon icon="ep:delete" />删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-if="filteredMaterials.length === 0 && !loading" class="empty-state">
      <Icon icon="ep:document" :size="64" />
      <p>暂无{{ getCategoryName(category) }}资料</p>
      <el-button type="primary" @click="handleAdd">
        <Icon icon="ep:plus" />添加第一个资料
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from 'vue'
import { MaterialApi, type MaterialVO } from '@/api/agent/manage/material'
import { formatDate } from '@/utils/formatTime'

interface Props {
  materials: MaterialVO[]
  category: string
  projectId?: number
}

interface Emits {
  add: [category: string]
  edit: [material: MaterialVO]
  delete: [material: MaterialVO & { category: string }]
  download: [material: MaterialVO]
  refresh: []
}

defineOptions({ name: 'ProjectMaterialList' })

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const loading = ref(false)
const searchKeyword = ref('')

// 过滤后的资料列表
const filteredMaterials = computed(() => {
  if (!searchKeyword.value) {
    return props.materials
  }
  return props.materials.filter((material) =>
    material.name.toLowerCase().includes(searchKeyword.value.toLowerCase())
  )
})

// 获取文件图标
const getFileIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    word: 'ep:document',
    pdf: 'ep:document',
    excel: 'ep:document',
    ppt: 'ep:document',
    image: 'ep:picture',
    video: 'ep:video-play',
    zip: 'ep:box',
    other: 'ep:document'
  }
  return iconMap[type] || 'ep:document'
}

// 获取文件类型名称
const getFileTypeName = (type: string) => {
  const nameMap: Record<string, string> = {
    word: 'Word',
    pdf: 'PDF',
    excel: 'Excel',
    ppt: 'PPT',
    image: '图片',
    video: '视频',
    zip: '压缩包',
    other: '其他'
  }
  return nameMap[type] || '未知'
}

// 获取分类名称
const getCategoryName = (category: string) => {
  const nameMap: Record<string, string> = {
    content: '内容',
    resource: '项目',
    meeting: '会议记录',
    technical: '技术文档',
    document: '其他文档'
  }
  return nameMap[category] || ''
}

// 搜索处理
const handleSearch = () => {
  // 搜索逻辑已在computed中处理
}

// 添加资料
const handleAdd = () => {
  emit('add', props.category)
}

// 编辑资料
const handleEdit = (material: MaterialVO) => {
  emit('edit', material)
}

// 删除资料
const handleDelete = (material: MaterialVO) => {
  emit('delete', { ...material, category: props.category })
}

// 下载资料
const handleDownload = (material: MaterialVO) => {
  emit('download', material)
}
</script>

<style lang="scss" scoped>
.project-material-list {
  .list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    .search-box {
      width: 300px;
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #909399;

    p {
      margin: 20px 0;
      font-size: 16px;
    }
  }
}
</style>
